<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大屏发布</title>
    <link type="favicon" rel="shortcut icon" href="./static/img/favicon.ico" />
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/common.css">
    <link rel="stylesheet" href="./static/less/release.css">
    <link href="./static/css/spop.min.css" rel="stylesheet"/>
    <script src="./static/js/Syunew6.js"></script>
    <script src="./static/js/isLogin.js"></script>
</head>

<body>
    <div id="release" class="release-box common-box" style="min-width:1200px;overflow: auto">
        <div class="head-box">
            <div class="logo-box">
                <img class="logo" src="./static/img/logo_1.png" alt="">
                <span class="title">成都杜甫草堂博物馆综合信息管理平台</span>
            </div>
            <div class="user-box">
                <div class="name">{{userData.userName}}，欢迎您</div>
                <div class="logout">
                    <span @click="logout" class="cus">
                        <i class="glyphicon glyphicon-log-out"></i>
                        <span>登出</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="address-box">
                <div class="address">
                    <a class="href" href="/index.html">首页</a>
                    <i class="glyphicon glyphicon-menu-right right"></i>
                    <span>大屏发布</span>
                </div>
                <div class="time">
                    {{date + '&nbsp;星期' + week + '&nbsp;' + time}}
                </div>
            </div>
            <div class="tab">
                <p class="title current">发布管理</p>
                <p class="title cus" @click="showRelease">查看大屏</p>
            </div>
            <div class="con-box clearfix">
                <div class="u_btn_box">
                    <button type="button" class="btn" :class="releaseType === 0 ? 'btn-info' : 'btn-default'" @click="releaseTypeChange(0)">全新发布</button>
                    <button type="button" class="btn" :class="releaseType === 1 ? 'btn-info' : 'btn-default'" @click="releaseTypeChange(1)">修改上次发布</button>
                </div>
                <form class="form-horizontal col-lg-8 col-md-10 col-sm-12 col-xs-12 form" style="margin-top: 20px;">
                    <div class="form-group">
                        <label for="notice" class="col-sm-3 col-md-3 col-lg-2 control-label">实时信息公告</label>
                        <div class="col-sm-9 col-md-19">
                            <input type="text" class="form-control" id="notice" v-model="notice">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="trailer" class="col-sm-3 col-md-3 col-lg-2 control-label">最新活动预告</label>
                        <div class="col-sm-9 col-md-19">
                            <input type="text" class="form-control" id="trailer" v-model="trailer">
                        </div>
                    </div>

                    <div class="form-group window">
                        <label for="url" class="col-sm-3 col-md-3 col-lg-2 control-label xs-hidden">单选项</label>
                        <div class="col-sm-9 col-md-19 pt5">
                            <div class="window-box cus" @click="openRadioType(0)">
                                <div class="u_radio_box" :class="showType === 0 ? 'current' : ''">
                                    <span class="u_radio"></span>
                                </div>
                                <div class="u_label">播放视频</div>
                            </div>
                            <div class="window-box cus" @click="openRadioType(1)">
                                <div class="u_radio_box" :class="showType === 1 ? 'current' : ''">
                                    <span class="u_radio"></span>
                                </div>
                                <div class="u_label">显示图片</div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group window">
                        <label for="url" class="col-sm-3 col-md-3 col-lg-2 control-label xs-hidden">多选项</label>
                        <div class="col-sm-9 col-md-19 pt5">
                            <div class="window-box cus" @click="openSelectType(1)">
                                <div class="u_radio_box" :class="showModelType.msg ? 'current' : ''">
                                    <span class="u_radio"></span>
                                </div>
                                <div class="u_label">实时信息公告</div>
                            </div>
                            <div class="window-box cus" @click="openSelectType(2)">
                                <div class="u_radio_box" :class="showModelType.active ? 'current' : ''">
                                    <span class="u_radio"></span>
                                </div>
                                <div class="u_label">最新活动预告</div>
                            </div>
                            <div class="window-box cus" @click="openSelectType(5)">
                                <div class="u_radio_box" :class="showModelType.number ? 'current' : ''">
                                    <span class="u_radio"></span>
                                </div>
                                <div class="u_label">在馆人数</div>
                            </div>
                            <div class="window-box cus" @click="openSelectType(3)">
                                <div class="u_radio_box" :class="showModelType.narrator ? 'current' : ''">
                                    <span class="u_radio"></span>
                                </div>
                                <div class="u_label">定时讲解</div>
                            </div>
                            <div class="window-box cus" @click="openSelectType(4)">
                                <div class="u_radio_box" :class="showModelType.device ? 'current' : ''">
                                    <span class="u_radio"></span>
                                </div>
                                <div class="u_label">剩余导览设备</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mt24">
                        <label for="video" class="col-sm-3 col-md-3 col-lg-2 control-label">视频播放列表</label>
                        <div class="col-sm-9 col-md-19 update-box">
                            <label for="video" class="filebtn cus" :class="videoLoading ? 'disable' : ''">
                                <input type="file" class="update" id="video" accept="video/*" :disabled="videoLoading" @change="videoUpload">
                                添加
                            </label>
                            <div class="loadingImg" v-show="videoLoading">
                                <img src="./static/img/loading.gif" >
                                <span>正在上传中请稍后</span>
                            </div>
                            <div class="tips" v-show="videoMsg">{{videoMsg}}</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 col-md-3 col-lg-2 control-label xs-hidden"></label>
                        <div class="col-sm-9 col-md-19 videos">
                            <p class="video" title="点击删除" v-for="(item,i) in videoList" :key="i" @click="delVideo(i)">{{item}}</p>
                        </div>
                    </div>

                    <div class="form-group mt24">
                        <label for="image" class="col-sm-3 col-md-3 col-lg-2 control-label">图片显示</label>
                        <div class="col-sm-9 col-md-19 update-box">
                            <label for="image" class="filebtn cus" :class="imgLoading ? 'disable' : ''">
                                <input type="file" class="update" id="image" :disabled="imgLoading" accept="image/*" @change="imgUpload">
                                添加
                            </label>
                            <div class="loadingImg" v-show="imgLoading">
                                <img src="./static/img/loading.gif" >
                                <span>正在上传中请稍后</span>
                            </div>
                            <div class="tips" v-show="imgMsg">{{imgMsg}}</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 col-md-3 col-lg-2 control-label xs-hidden"></label>
                        <div class="col-sm-9 col-md-19 videos">
                            <p class="video" title="点击删除" v-for="(item,i) in imgList" :key="i" @click="delImg(i)">{{item}}</p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="showTime" class="col-sm-3 col-md-3 col-lg-2 control-label">信息显示时间间隔(秒)</label>
                        <div class="col-sm-9 col-md-19">
                            <input type="number" class="form-control" id="showTime" v-model="showTime">
                        </div>
                    </div>
                    <!-- <div class="form-group">
                        <label for="time" class="col-xs-12 col-sm-3 col-md-3 col-lg-2 control-label">文字标签定时</label>
                        <div class="col-xs-6 col-sm-4 col-md-6">
                            <input type="text" class="form-control" id="time">
                        </div>
                        <span class="timer">(s)显示</span>
                    </div> -->
                    
                </form>
                <div class="btn-box col-lg-8 col-md-10 col-sm-12 col-xs-12">
                    <div class="btn submit" @click="preview">预览</div>
                    <div class="btn fabu" @click="pulish">发布</div>
                </div>
            </div>
        </div>
        <div class="footer">
            Copyright 成都杜甫草堂博物馆
        </div>
        <div class="loading" v-show="!complete">
            <div class="spinner">
                <div class="spinner-container container1">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container2">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container3">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/api/api.js"></script>
    <script src="./static/js/prism.js"></script>
    <script src="./static/js/spop.min.js"></script>
    <script>
        var release = new Vue({
            el: '#release',
            data() {
                return {
                    releaseType: 0,
                    time: this.timeFormat('hh:mm'),
                    date: this.timeFormat('yyyy年MM月dd日'),
                    week: this.timeFormat('D'),
                    baseUrl: api.baseUrl,
                    userData: store.fetch('userLoginInfo'),
                    showType: 0,
                    showModelType: {
                        msg: true,
                        active: true,
                        narrator: true,
                        device: true,
                        number: true
                    },
                    showTime: 60,
                    complete: false,
                    notice: '',//实时信息公告
                    trailer: '', //最新活动预告
                    videos: '',
                    videoLoading: false,
                    videoList: [],
                    videoMsg: '',
                    imgs: '',
                    imgLoading: false,
                    imgList: [],
                    imgMsg: '',
                }
            },
            created() {

            },
            mounted() {
                this.getDate();
                // this.getOldData()
            },
            methods: {
                //时间格式化
                timeFormat(fmt) {
                    let date = new Date();
                    let week = {
                        0: '日',
                        1: '一',
                        2: '二',
                        3: '三',
                        4: '四',
                        5: '五',
                        6: '六'
                    }
                    var o = {
                        "M+": date.getMonth() + 1, //月份 
                        "d+": date.getDate(), //日 
                        "h+": date.getHours(), //小时 
                        "m+": date.getMinutes(), //分 
                        "s+": date.getSeconds(), //秒 
                        "q+": Math.floor((date.getMonth() + 3) / 3), //季度 
                        "S": date.getMilliseconds(), //毫秒
                        "D": week[date.getDay()]
                    };
                    if (/(y+)/.test(fmt))
                        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o)
                        if (new RegExp("(" + k + ")").test(fmt))
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(
                                ("" + o[k]).length)));
                    return fmt;
                },

                //动态获取时间、
                getDate() {
                    setInterval(() => {
                        this.time = this.timeFormat('hh:mm');
                        this.date = this.timeFormat('yyyy年MM月dd日');
                        this.week = this.timeFormat('D')
                    }, 1000);
                    this.complete = true;
                },

                //登出
                logout() {
                    store.clear('userLoginInfo');
                    store.clear('userData');
                    window.location.href = '/login.html'
                },

                releaseTypeChange(i) {
                    this.releaseType = i;
                    if(i === 1) {
                        this.getOldData()
                    }else {
                        this.showType = 0;
                        this.showModelType = {
                            msg: true,
                            active: true,
                            narrator: true,
                            device: true,
                            number: true
                        };
                        this.showTime = 60;
                        this.notice = '';
                        this.trailer = '';
                        this.videos = '';
                        this.videoList = [];
                        this.imgs = '';
                        this.imgList = '';
                    }
                },

                // content: "实时公告实时公告实时公告实时公告实时公告实时公告"
                // createTime: "2019-04-04 15:50:28"
                // id: 22
                // imgName: ""
                // newContent: "最新活动预告最新活动预告最新活动预告最新活动预告最新活动预告最新活动预告"
                // showTime: 60
                // showType: "0"
                // type: "1,1,1,1,1"
                // updateTime: "2019-04-04 15:50:28"
                // videoName: "09f82864-7a2b-11e8-8212-6a0001560470.mp4"

                //获取已发布信息
                getOldData() {
                    api.getPublish().then(res => {
                        if(res.data.status == 'success') {
                            let data = res.data.data;
                            this.notice = data.content;
                            this.trailer = data.newContent;
                            this.imgs = data.imgName;
                            this.imgList = data.imgName.split(',').length > 0 ? data.imgName.split(',')[0] ? data.imgName.split(',') : [] : []; 
                            this.showType = parseInt(data.showType);
                            this.showTime = data.showTime;
                            this.showModelType = {
                                msg: data.type.split(',')[0] == 1,
                                active: data.type.split(',')[1] == 1,
                                narrator: data.type.split(',')[2] == 1,
                                device: data.type.split(',')[3] == 1,
                                number: data.type.split(',')[4] == 1
                            };
                            this.videoList = data.videoName.split(',').length > 0 ? data.videoName.split(',')[0] ? data.videoName.split(',') : [] : []; 
                        }
                    })
                },

                //选择显示类型
                openRadioType(i) {
                    this.showType = i;
                },

                //选择显示模块
                openSelectType(i) {
                    if(i === 1) {
                        this.showModelType.msg = !this.showModelType.msg;
                    }
                    if(i === 2) {
                        this.showModelType.active = !this.showModelType.active;
                    }
                    if(i === 3) {
                        this.showModelType.narrator = !this.showModelType.narrator;
                    }
                    if(i === 4) {
                        this.showModelType.device = !this.showModelType.device;
                    }
                    if(i === 5) {
                        this.showModelType.number = !this.showModelType.number;
                    }
                },

                //视频文件上传
                videoUpload(e) {
                    let formData = new FormData();
                    let file = e.target.files[0];
                    if(!file) {
                        return false
                    }
                    formData.append('fileName',file);
                    this.videoLoading = true;
                    api.upload(formData).then(res => {
                        this.videoLoading = false;
                        if(res.data.status == 'success') {
                            this.videoList.push(file.name)
                        }else {
                            this.videoMsg = '上传失败，请稍后再试！';
                            setTimeout(() => {
                                this.videoMsg = ''
                            }, 3000)
                        }
                    }).catch(err => {
                        this.videoMsg = '上传失败，请稍后再试！';
                        this.videoLoading = false;
                        setTimeout(() => {
                            this.videoMsg = ''
                        }, 3000)
                    })
                    e.target.value = '';
                },

                //图片文件上传
                imgUpload(e) {
                    let formData = new FormData();
                    let file = e.target.files[0];
                    if(!file) {
                        return false
                    }
                    formData.append('fileName',file);
                    this.imgLoading = true;
                    api.upload(formData).then(res => {
                        this.imgLoading = false;
                        if(res.data.status == 'success') {
                            this.imgList.push(file.name)
                        }else {
                            this.imgMsg = '上传失败，请稍后再试！';
                            setTimeout(() => {
                                this.imgMsg = ''
                            }, 3000)
                        }
                    }).catch(err => {
                        this.imgMsg = '上传失败，请稍后再试！';
                        this.imgLoading = false;
                        setTimeout(() => {
                            this.imgMsg = ''
                        }, 3000)
                    })
                    e.target.value = '';
                },

                delImg(i) {
                    this.imgList.splice(i,1)
                },

                delVideo(i) {
                    this.videoList.splice(i,1)
                },

                //预览
                preview() {
                    let imgs = this.imgList.join(',');
                    let videos = this.videoList.join(',');
                    let type = JSON.stringify(this.showModelType)
                    window.open( '/infoDisplay.html?preview=1&notice=' + 
                                this.notice + '&trailer=' + this.trailer +
                                '&imgs=' + imgs +
                                '&videos=' + videos +
                                '&showType=' + this.showType +
                                '&type=' + type +
                                '&showTime=' + this.showTime);
                },

                //发布
                pulish() {
                    let body = {
                        content: this.notice,
                        imgName: this.imgList.join(','),
                        newContent: this.trailer,
                        showType: this.showType.toString(),
                        videoName: this.videoList.join(','),
                        type: (this.showModelType.msg ? '1' : '0') + ',' + (this.showModelType.active ? '1' : '0') + ',' + (this.showModelType.narrator ? '1' : '0') + ',' + (this.showModelType.device ? '1' : '0') + ',' + (this.showModelType.number ? '1' : '0'),
                        showTime: this.showTime
                    }
                    this.complete = false;
                    api.setPublish(body).then(res => {
                        this.complete = true;
                        if(res.data.status == 'success') {
                            spop({
                                template: '<h4 class="spop-title">提示</h4>发布成功！',
                                style: 'success',
                                autoclose: 3000
                            });
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '发布管理',
                                moduleName: '大屏发布',
                                operation: '发布大屏信息'
                            }
                            this.recordLog(body)
                        }else {
                            spop({
                                template: '<h4 class="spop-title">提示</h4>发布失败！',
                                style: 'error',
                                autoclose: 3000
                            });
                        }
                    }).catch(err => {
                        this.complete = true;
                        spop({
                            template: '<h4 class="spop-title">提示</h4>服务器开小差了，请稍后再试！',
                            style: 'error',
                            autoclose: 3000
                        });
                    })
                },

                //查看大屏
                showRelease() {
                    window.open('/infoDisplay.html?preview=0');
                    let body = {
                        author: this.userData.userName,
                        moduleChileName: '查看大屏',
                        moduleName: '大屏发布',
                        operation: '查看大屏'
                    }
                    this.recordLog(body)
                },

                recordLog(body,fn=false) {
                    api.updateLog(body).then(res => {
                        if(fn) {
                            let newFN = new Function(fn);
                            newFN();
                        }
                    }).catch(err => {
                        console.error(err)
                    })
                },
            }
        })
    </script>
</body>

</html>